<script setup lang="ts">
import { useRouter } from "vue-router";

defineOptions({
  name: "Welcome"
});

const router = useRouter();

function handleClick(toRoute: string) {
  router.push(toRoute);
}
</script>

<template>
  <div>
    <h1>欢迎使用网络空间研判工具</h1>
    <el-divider />
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card
          class="box-card"
          style="background-color: #409eff"
          @click="handleClick('/search/host')"
        >
          <div>主机信息查询</div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card
          class="box-card"
          style="background-color: #e6a23c"
          @click="handleClick('/search/dns')"
        >
          <div>域名解析查询</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card
          class="box-card"
          style="background-color: #67c23a"
          @click="handleClick('/search/whois')"
        >
          <div>Whois信息查询</div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card
          class="box-card"
          style="background-color: #66b1ff"
          @click="handleClick('/search/scan')"
        >
          <div>端口服务扫描</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.box-card {
  padding: 0;
}

.box-card:hover {
  cursor: pointer;
}

.box-card div {
  width: 100%;
  height: 20vh;
  font-size: x-large;
  font-weight: bolder;
  line-height: 20vh;
  color: white;
  text-align: center;
}
</style>
